@import 'tailwindcss';
@import 'tw-animate-css';

@font-face {
	font-family: 'Geist';
	src: url('/fonts/Geist/geist.woff2') format('woff2');
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Geist Mono';
	src: url('/fonts/Geist/geist-mono.woff2') format('woff2');
	font-style: normal;
	font-display: swap;
}

@layer base {
	*,
	::after,
	::before,
	::backdrop,
	::file-selector-button {
		border-color: var(--color-gray-200, currentcolor);
	}
}

:root {
	--radius: 0.65rem;
	--background: oklch(1 0 0);
	--foreground: oklch(0.141 0.005 285.823);
	--card: oklch(1 0 0 / 0.6);
	--card-foreground: oklch(0.141 0.005 285.823);
	--popover: oklch(1 0 0);
	--popover-foreground: oklch(0.141 0.005 285.823);
	--primary: oklch(0.606 0.25 292.717);
	--primary-foreground: oklch(0.141 0.005 285.823);
	--secondary: oklch(0.967 0.001 286.375 / 0.6);
	--secondary-foreground: oklch(0.21 0.006 285.885);
	--muted: oklch(0.967 0.001 286.375 / 0.6);
	--muted-foreground: oklch(0.552 0.016 285.938);
	--accent: oklch(0.967 0.001 286.375 / 0.6);
	--accent-foreground: oklch(0.21 0.006 285.885);
	--destructive: oklch(0.577 0.245 27.325);
	--border: oklch(0.92 0.004 286.32);
	--input: oklch(0.92 0.004 286.32);
	--ring: oklch(0.606 0.25 292.717);
	--chart-1: oklch(0.646 0.222 41.116);
	--chart-2: oklch(0.6 0.118 184.704);
	--chart-3: oklch(0.398 0.07 227.392);
	--chart-4: oklch(0.828 0.189 84.429);
	--chart-5: oklch(0.769 0.188 70.08);
	--sidebar: oklch(0.985 0 0 / 0.6);
	--sidebar-foreground: oklch(0.141 0.005 285.823);
	--sidebar-primary: oklch(0.606 0.25 292.717);
	--sidebar-primary-foreground: oklch(0.969 0.016 293.756);
	--sidebar-accent: oklch(0.967 0.001 286.375 / 0.6);
	--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
	--sidebar-border: oklch(0.92 0.004 286.32);
	--sidebar-ring: oklch(0.606 0.25 292.717);

	--bg-surface: oklch(1 0 0);
	--glass-base: var(--bg-surface);
	--glass-tint: var(--primary);
	--glass-bg-alpha: 0.25;
	--glass-border-alpha: 0.3;
	--glass-shadow-color: oklch(0 0 0 / 0.12);
	--glass-blur: 16px;
	--glass-saturation: 180%;
	--glass-stroke-outer: color-mix(in oklch, white 8%, transparent);
	--glass-stroke-inner: color-mix(in oklch, black 8%, transparent);
	--glass-stroke-outer-strong: color-mix(in oklch, white 12%, transparent);
	--glass-stroke-inner-strong: color-mix(in oklch, black 12%, transparent);
	--glass-noise-opacity: 0.03;

	--glass-light-alpha: 0.15;
	--glass-medium-alpha: 0.25;
	--glass-heavy-alpha: 0.35;

	--glass-blur-xs: 4px;
	--glass-blur-sm: 8px;
	--glass-blur-md: 14px;
	--glass-blur-lg: 20px;
	--glass-blur-xl: 28px;
	--glass-blur-popup: 48px;
}

.dark {
	--background: oklch(0.141 0.005 285.823);
	--foreground: oklch(0.985 0 0);
	--card: oklch(0.21 0.006 285.885 / 0.6);
	--card-foreground: oklch(0.985 0 0);
	--popover: oklch(0.21 0.006 285.885);
	--popover-foreground: oklch(0.985 0 0);
	--primary: oklch(0.541 0.281 293.009);
	--primary-foreground: oklch(0.969 0.016 293.756);
	--secondary: oklch(0.274 0.006 286.033 / 0.55);
	--secondary-foreground: oklch(0.985 0 0);
	--muted: oklch(0.274 0.006 286.033 / 0.55);
	--muted-foreground: oklch(0.705 0.015 286.067);
	--accent: oklch(0.274 0.006 286.033 / 0.55);
	--accent-foreground: oklch(0.985 0 0);
	--destructive: oklch(0.704 0.191 22.216);
	--border: oklch(1 0 0 / 10%);
	--input: oklch(1 0 0 / 15%);
	--ring: oklch(0.541 0.281 293.009);
	--chart-1: oklch(0.488 0.243 264.376);
	--chart-2: oklch(0.696 0.17 162.48);
	--chart-3: oklch(0.769 0.188 70.08);
	--chart-4: oklch(0.627 0.265 303.9);
	--chart-5: oklch(0.645 0.246 16.439);
	--sidebar: oklch(0.21 0.006 285.885 / 0.6);
	--sidebar-foreground: oklch(0.985 0 0);
	--sidebar-primary: oklch(0.541 0.281 293.009);
	--sidebar-primary-foreground: oklch(0.969 0.016 293.756);
	--sidebar-accent: oklch(0.274 0.006 286.033 / 0.55);
	--sidebar-accent-foreground: oklch(0.985 0 0);
	--sidebar-border: oklch(1 0 0 / 10%);
	--sidebar-ring: oklch(0.541 0.281 293.009);

	--bg-surface: oklch(0.21 0.006 285.885);
	--glass-base: var(--bg-surface);
	--glass-tint: var(--primary);
	--glass-bg-alpha: 0.35;
	--glass-border-alpha: 0.28;
	--glass-shadow-color: oklch(0 0 0 / 0.32);
	--glass-saturation: 180%;
	--glass-stroke-outer: color-mix(in oklch, white 10%, transparent);
	--glass-stroke-inner: color-mix(in oklch, black 10%, transparent);
	--glass-stroke-outer-strong: color-mix(in oklch, white 14%, transparent);
	--glass-stroke-inner-strong: color-mix(in oklch, black 14%, transparent);

	--glass-light-alpha: 0.2;
	--glass-medium-alpha: 0.35;
	--glass-heavy-alpha: 0.5;

	--glass-blur-popup: 48px;
}

@theme inline {
	--radius-sm: calc(var(--radius) - 4px);
	--radius-md: calc(var(--radius) - 2px);
	--radius-lg: var(--radius);
	--radius-xl: calc(var(--radius) + 4px);

	--color-background: var(--background);
	--color-foreground: var(--foreground);
	--color-muted: var(--muted);
	--color-muted-foreground: var(--muted-foreground);
	--color-popover: var(--popover);
	--color-popover-foreground: var(--popover-foreground);
	--color-card: var(--card);
	--color-card-foreground: var(--card-foreground);
	--color-border: var(--border);
	--color-input: var(--input);
	--color-primary: var(--primary);
	--color-primary-foreground: var(--primary-foreground);
	--color-secondary: var(--secondary);
	--color-secondary-foreground: var(--secondary-foreground);
	--color-accent: var(--accent);
	--color-accent-foreground: var(--accent-foreground);
	--color-destructive: var(--destructive);
	--color-destructive-foreground: var(--destructive-foreground);
	--color-ring: var(--ring);
	--color-radius: var(--radius);
	--color-sidebar: var(--sidebar);
	--color-sidebar-foreground: var(--sidebar-foreground);
	--color-sidebar-primary: var(--sidebar-primary);
	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
	--color-sidebar-accent: var(--sidebar-accent);
	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
	--color-sidebar-border: var(--sidebar-border);
	--color-sidebar-ring: var(--sidebar-ring);

	--font-sans: 'Geist', system-ui, sans-serif;
	--font-mono: 'Geist Mono';
}

@layer base {
	* {
		@apply border-border;
	}

	body {
		@apply bg-background text-foreground font-sans antialiased;
		position: relative;
	}
	button {
		@apply cursor-pointer;
	}

	.glass,
	.glass-light,
	.glass-medium,
	.glass-heavy {
		contain: layout style paint;
		content-visibility: auto;
	}
}

body:not(.glass-enabled) {
	--card: var(--bg-card);
	--card-foreground: var(--foreground);
	--sidebar: var(--bg-surface);
	--popover: var(--bg-surface);

	&::before {
		display: none;
	}

	&::after {
		opacity: 0.015;
	}

	.glass,
	.glass-light,
	.glass-medium,
	.glass-heavy,
	.glass-strong,
	.glass-subtle {
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
		background: var(--bg-surface) !important;
		border-color: var(--border) !important;
		box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
	}

	.bubble {
		background: var(--bg-surface) !important;
		box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
	}

	.bubble-shadow,
	.bubble-shadow-lg {
		box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
	}

	.hover-lift:hover {
		transform: none !important;
	}

	.bubble-outline {
		background: var(--bg-surface) !important;
		border: 1px solid var(--border) !important;
	}

	.blob-floating::before {
		display: none;
	}

	input[data-slot='input'],
	textarea[data-slot='textarea'],
	[data-slot='select-trigger'] {
		background: var(--input) !important;
		border: 1px solid var(--border) !important;
	}

	input[data-slot='input']:focus-visible,
	textarea[data-slot='textarea']:focus-visible,
	[data-slot='select-trigger']:focus-visible {
		background: var(--background) !important;
		border-color: var(--ring) !important;
		box-shadow: 0 0 0 3px hsl(var(--ring) / 0.2) !important;
		outline: none !important;
	}

	[data-sidebar='sidebar'] {
		background: var(--bg-surface) !important;
		backdrop-filter: none !important;
	}

	[class*='backdrop-blur'] {
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
	}

	[data-slot='dialog-content'],
	[data-slot='sheet-content'],
	[data-slot='popover-content'],
	[data-slot='dropdown-menu-content'],
	[data-slot='select-content'] {
		background: var(--bg-surface) !important;
		border: 1px solid var(--border) !important;
	}

	[data-slot='card'] {
		background: var(--bg-surface) !important;
		border: 1px solid var(--border) !important;
	}

	[class*='bg-background/'],
	[class*='bg-card/'],
	[class*='bg-popover/'],
	[class*='bg-muted/'],
	[class*='bg-secondary/'],
	[class*='bg-accent/'],
	[class*='bg-input/'] {
		background-color: var(--bg-surface) !important;
	}

	.glass-medium {
		background: var(--bg-surface) !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}
}

body.glass-enabled {
	background-color: var(--background);
}

body.glass-enabled::before {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	body.glass-enabled::before {
		animation: none;
	}
}

body::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	background-image: url('');
	background-size: 200px 200px;
	opacity: var(--glass-noise-opacity);
	pointer-events: none;
}

@keyframes ambient-float {
	0% {
		transform: translate3d(-1.5%, -1%, 0) scale(1);
	}
	100% {
		transform: translate3d(1.5%, 1%, 0) scale(1.02);
	}
}

@layer components {
	/* Convenience wrapper for content blocks */
	.glass-card {
		border-radius: var(--radius-lg);
		padding: 1rem;
	}
}

@layer utilities {
	/* Bubbly UI helpers */
	.bubble {
		background:
			radial-gradient(
				120% 100% at 10% 0%,
				color-mix(in oklch, var(--glass-tint, var(--primary)) 10%, transparent) 0%,
				transparent 60%
			),
			radial-gradient(
				120% 100% at 100% 0%,
				color-mix(in oklch, var(--glass-base, var(--bg-surface)) 12%, transparent) 0%,
				transparent 60%
			);
		background-color: color-mix(in oklch, var(--glass-base, var(--bg-surface)) 92%, transparent);
		border-radius: var(--radius-xl);
		box-shadow:
			0 8px 24px -8px color-mix(in oklch, var(--glass-shadow-color) 70%, transparent),
			0 1px 0 0 color-mix(in oklch, var(--glass-base, var(--bg-surface)) 30%, transparent) inset;
	}

	.glass-glow {
		box-shadow:
			0 0 20px -5px color-mix(in oklch, var(--glass-tint, var(--primary)) 40%, transparent),
			0 10px 30px -10px var(--glass-shadow-color),
			0 1px 0 0 color-mix(in oklch, var(--glass-base, var(--bg-surface)) 28%, transparent) inset;
	}

	.glass-shadow-soft {
		box-shadow:
			0 2px 8px -2px color-mix(in oklch, var(--glass-shadow-color) 40%, transparent),
			0 1px 0 0 color-mix(in oklch, var(--glass-base, var(--bg-surface)) 20%, transparent) inset;
	}

	.glass-shadow-medium {
		box-shadow:
			0 4px 16px -4px color-mix(in oklch, var(--glass-shadow-color) 60%, transparent),
			0 1px 0 0 color-mix(in oklch, var(--glass-base, var(--bg-surface)) 25%, transparent) inset;
	}

	.bubble-pill {
		border-radius: 9999px;
		padding-inline: 0.875rem;
		padding-block: 0.5rem;
	}

	.bubble-shadow {
		box-shadow:
			0 8px 30px -12px color-mix(in oklch, var(--glass-shadow-color) 70%, transparent),
			0 1px 0 0 color-mix(in oklch, var(--glass-base, var(--bg-surface)) 30%, transparent) inset;
	}

	.bubble-shadow-lg {
		box-shadow:
			0 14px 40px -14px color-mix(in oklch, var(--glass-shadow-color) 80%, transparent),
			0 1px 0 0 color-mix(in oklch, var(--glass-base, var(--bg-surface)) 35%, transparent) inset;
	}

	.hover-lift {
		transition:
			transform 200ms ease,
			box-shadow 200ms ease;
	}

	.hover-lift:hover {
		transform: translateY(-2px) translateZ(0);
	}

	@media (prefers-reduced-motion: reduce) {
		.hover-lift {
			transition: none;
		}
		.hover-lift:hover {
			transform: none;
		}
	}

	/* Prevent stat-card value from scaling out of bounds on hover */
	.glass-light.group .tabular-nums {
		transform-origin: left center;
	}
	.glass-light.group:hover .tabular-nums {
		transform: none !important;
	}

	.bubble-outline {
		background:
			linear-gradient(var(--glass-base, var(--bg-surface)), var(--glass-base, var(--bg-surface))) padding-box,
			linear-gradient(135deg, color-mix(in oklch, var(--glass-tint, var(--primary)) 28%, transparent), transparent 60%) border-box;
		border: 1px solid transparent;
		border-radius: var(--radius-lg);
	}

	/* Floating blob utility for accent backgrounds on sections */
	.blob-floating {
		position: relative;
		isolation: isolate;
	}
	.blob-floating::before {
		content: '';
		position: absolute;
		inset: -20%;
		z-index: -1;
		background:
			radial-gradient(
				40% 40% at 20% 20%,
				color-mix(in oklch, var(--glass-tint, var(--primary)) 20%, transparent) 0%,
				transparent 60%
			),
			radial-gradient(40% 50% at 80% 30%, color-mix(in oklch, var(--chart-2) 14%, transparent) 0%, transparent 60%);
		filter: blur(60px) saturate(105%);
		opacity: 0.22;
		animation: blob-float var(--blob-speed, 18s) ease-in-out infinite alternate;
		will-change: transform;
	}

	@keyframes blob-float {
		0% {
			transform: translate3d(-2%, 0, 0) scale(1);
		}
		100% {
			transform: translate3d(2%, 1%, 0) scale(1.05);
		}
	}

	/* Glass variants for cards/components */
	.glass-medium {
		background: color-mix(in oklch, var(--glass-base, var(--bg-surface)) var(--glass-medium-alpha), transparent);
		backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturation));
		-webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturation));
	}
}

.version-collapsed {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	transform: rotate(180deg);
	opacity: 0.7;
}

html,
body {
	overflow-x: hidden;
	max-width: 100vw;
	min-height: 100dvh;
}

body {
	display: flex;
	flex-direction: column;
}

main {
	min-width: 0;
	max-width: 100%;
	overflow-x: hidden;
}

html {
	scrollbar-gutter: stable;
}
